<template>
  <div class=''>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
        <div class="swiper-slide">4</div>
        <div class="swiper-slide">5</div>
        <div class="swiper-slide">6</div>
        <div class="swiper-slide">7</div>
        <div class="swiper-slide">8</div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from '@/static/js/swiper-bundle.min'
import '@/static/css/swiper-bundle.min.css'
export default {
  data () {
    return {
    }
  },
  mounted(){
      new Swiper('.swiper-container', {
        autoplay: true,
        loop: true,
        effect : 'coverflow',
        slidesPerView: 3,
        centeredSlides: false,
        spaceBetween: 20,
        disableOnInteraction: false,
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 50,
          slideShadows : false
        },
			  observer:true,//修改swiper自己或子元素时，自动初始化swiper
			  observeParents:true,//修改swiper的父元素时，自动初始化swiper
      })
 },
}
</script>

<style scoped>
.swiper-slide {
  background-color: #0eaada;
  height: 2rem;
}
</style>
